<template>
  <div class="pro-date-range-picker">
    <n-space align="center">
      <n-date-picker
        v-model:formatted-value="startValue"
        :placeholder="props.startDatePlaceholder"
        v-bind="{ ...defaultConfig, ...$attrs, ...startDateConfig }"
      />
      <slot name="icon">
        <icons
          name="i-arrow-right"
          size="20"
          fill="rgba(194, 194, 194, 1)"
          :isHoverCursor="false"
        />
      </slot>
      <n-date-picker
        v-model:formatted-value="endValue"
        :placeholder="props.endDatePlaceholder"
        :isDateDisabled="isEndDateDisabled"
        v-bind="{ ...defaultConfig, ...$attrs, ...endDateConfig }"
      />
    </n-space>
  </div>
</template>

<script lang="ts" setup name="ProDateRangePicker">
  const props = defineProps({
    modelValue: {
      type: Array,
      default: () => []
    },
    startDate: {
      type: [Number, String],
      default: undefined
    },
    endDate: {
      type: [Number, String],
      default: undefined
    },
    startDateConfig: {
      type: Object,
      default: () => ({})
    },
    endDateConfig: {
      type: Object,
      default: () => ({})
    },
    startDatePlaceholder: {
      type: String,
      default: '请选择开始时间'
    },
    endDatePlaceholder: {
      type: String,
      default: '请选择结束时间'
    }
  })

  const startValue = ref(
    props.modelValue.length ? props.modelValue[0] : props.startDate
  )
  const endValue = ref(
    props.modelValue.length === 2 ? props.modelValue[1] : props.endDate
  )

  const attrs = useAttrs()

  // 默认为时间选择器，且可清除，如果需要开始结束时间双向disable则需要开启updateValueOnClose
  const defaultConfig = {
    type: 'datetime',
    clearable: true,
    actions: ['clear', 'now'],
    updateValueOnClose: true,
    timePickerProps: {
      actions: ['clear'],
      updateValueOnClose: true
    }
  }

  // 双向绑定，可绑定为一个数组，也可分别绑定两个值
  const emits = defineEmits([
    'change',
    'update:modelValue',
    'update:startDate',
    'update:endDate'
  ])

  watch([startValue, endValue], (v) => {
    emits('change', v)
    emits('update:modelValue', v)
    emits('update:startDate', v[0])
    emits('update:endDate', v[1])
  })

  watch(
    () => props.modelValue,
    (v) => {
      const [startV, endV] = Array.isArray(v) ? v : []
      startValue.value = startV || null
      endValue.value = endV || null
    }
  )

  watch(
    () => props.startDate,
    (v) => {
      startValue.value = v || null
    }
  )

  watch(
    () => props.endDate,
    (v) => {
      endValue.value = v || null
    }
  )

  // disable
  // 获得时间戳
  const getDateParse = (date) => {
    return Date.parse(new Date(date).toLocaleDateString())
  }

  /**  date-time类型  **/
  // 结束时间
  const endDateTimeDisabled = (current: number) => {
    if (startValue.value) {
      return getDateParse(current) < getDateParse(startValue.value)
    }
    return false
  }

  /**  date类型  **/
  // 结束时间
  const endDateDisabled = (current: number) => {
    if (startValue.value) {
      return getDateParse(current) <= getDateParse(startValue.value)
    }
    return false
  }

  const disabledDict = {
    datetime: endDateTimeDisabled,
    date: endDateDisabled
  }

  const isEndDateDisabled = computed(() => {
    const dataType = (attrs.type as string) || defaultConfig.type
    return disabledDict[dataType] || (() => false)
  })
</script>

<style lang="less" scoped>
  .pro-date-range-picker {
    width: 100%;
    :deep(.n-space) {
      > div:first-child,
      > div:last-child {
        flex: 1;
      }
    }
  }
</style>
